<div class="address-pup-box" ng-click="$event.stopPropagation()" ng-show="areas.showPanel === true">
    <div class="address-slide" ng-show="areas.searching === true">
        <ul>
            <li ng-repeat="area in areas.foundAreas"><a href="javascript:void(0)" ng-click="areas.deepSelect($event, area.code)">{{areas.getDisplayPath(area.code)}}</a></li>
        </ul>
    </div>

    <div class="address-box" ng-show="areas.selection === true">
        <div class="address-title">
            <span class="hot-city-span" ng-class="{\'span-on\': areas.activeTab === \'common\'}" ng-click="areas.activeTab = \'common\'">热门城市</span>
            <span ng-class="{\'span-on\':areas.activeTab === \'province\'}" ng-click="areas.activeTab = \'province\'">省份</span>
            <span ng-class="{\'span-on\':areas.activeTab === \'city\', \'disable-btn\': areas.cityDisabled}" ng-click="areas.selectCityTab()">城市</span>
            <span class="last-child" ng-class="{\'span-on\':areas.activeTab === \'county\', \'disable-btn\': areas.cityDisabled || areas.countyDisabled}" ng-click="areas.selectCountyTab()">县区</span>
        </div>
        <div class="address-mian">
            <!--热门城市tab-->
            <div class="hot-city address-tab clearfix" ng-show="areas.activeTab === \'common\'">
                <dl> <!--class="address-list clearfix"-->
                    <dd>
                        <a href="javascript:;" ng-repeat="area in areas.commonAreas" ng-class="{\'active\':areas.selectedArea.c === area.c}" ng-click="areas.deepSelect($event, area.c)">{{area.n}}</a>
                    </dd>
                </dl>
            </div>
            <!--省份tab-->
            <div class="province address-tab clearfix" ng-show="areas.activeTab === \'province\'">
                <div class="list-arrow list-prev"><i class="list-arrow-icon iconfont icon-qiehuanqizuo" ng-click="areas.provinceGoPage(-1)"></i></div>
                <div class="province-list">
                    <dl class="clearfix" ng-repeat="provinceGroup in areas.provinceGroupPage">
                        <dt>{{provinceGroup.range}}</dt>
                        <dd>
                            <a href="javascript:" ng-repeat="province in provinceGroup.provinces" ng-click="areas.select($event, province.c)">{{province.n}}</a>
                        </dd>
                    </dl>
                </div>
                <div class="list-arrow list-next"><i class="list-arrow-icon iconfont icon-qiehuanqiyou" ng-click="areas.provinceGoPage(1)"></i></div>
            </div>

            <!--城市tab-->
            <div class="city address-tab clearfix" ng-show="areas.activeTab === \'city\'">
                <div class="list-arrow list-prev"><i class="list-arrow-icon iconfont icon-qiehuanqizuo" ng-click="areas.cityGoPage(-1)"></i></div>
                <div class="city-list">
                    <dl>
                        <dd>
                            <a href="javascript:;" ng-repeat="city in areas.cities" ng-class="{\'active\':areas.selectedArea.c === city.c}" ng-click="areas.select($event, city.c)">{{city.n}}</a>
                        </dd>
                    </dl>
                </div>
                <div class="list-arrow list-next"><i class="list-arrow-icon iconfont icon-qiehuanqiyou" ng-click="areas.cityGoPage(1)"></i></div>
            </div>

            <!--区县tab-->
            <div class="county address-tab clearfix" ng-show="areas.activeTab === \'county\'">
                <div class="list-arrow list-prev"><i class="list-arrow-icon iconfont icon-qiehuanqizuo" ng-click="areas.countyGoPage(-1)"></i></div>
                <div class="county-list">
                    <dl>
                        <dd> 
                            <a href="javascript:;" ng-repeat="county in areas.counties" ng-class="{\'active\':areas.selectedArea.c === county.c}" ng-click="areas.select($event, county.c)">{{county.n}}</a>
                        </dd>
                    </dl>
                </div>
                <div class="list-arrow list-next"><i class="list-arrow-icon iconfont icon-qiehuanqiyou" ng-click="areas.countyGoPage(1)"></i></div>
            </div>
        </div>
    </div>
</div>